React Native学习笔记
1. react-native init AwesomeProject原因分析：react-native 0.55.6版本的问题，需要在init项目的时候指定老版本号，比如0.55.4解决方案：react-native init AwesomeProject -- version 0.55.42. react-native run-android Execution failed for task ‘:app:prepareSrolkReactNativeFilePickerUnspecifiedLibra...
2024-01-10
React Native_环境编译
官方环境搭建一、两种方式运行程序1、指令运行：react-native run-android。运行结果如下图通过指令运行结果二：直接通过android studio运行二、遇到的问题1、unable to load script.make sure you're either running a metro server。如下图所示。标题异常图像a：通过指令启动时没有启动metro server解决方法：1：运行 adb rev...
2024-01-10
React-Native -课后练习
import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native';class meituan extends Component { render() { return ( <View> <View style={[styles.view_row,styles.height_160]}> ...
2024-01-10
React-Native踩坑记录二
1.Image组件的borderRadius画圆有平台兼容性问题，在IOS下会失效解决方法有几种(1)在外面包裹一层View,对View组件使用borderRadius就可以了，这是我的做法(2)在同一级属性块下加上overflow: 'hidden'，我没试过，大家可以阅读下面的链接https://www.jianshu.com/p/d237f02584182.React-Native的渐变实现方案(1) 使用react-native-li...
2024-01-10
React Native View组件实例
我们如何通过RN实现如图所示的效果：一：图形分析1.1：图形分为3列，我们设置flexDirection为“”row”，每个View独占1/3，flex设置为11.2：2,3列先把图形均分为上下两部分，填充内容1.3：给2,3列设置边框二：代码实现按照一的分析，实现逻辑如下：2.1：把布局分为3部分2.2：分别填充内容2.3：添加...
2024-01-10
React Native中的全局变量/常量
在ReactNative中，有一种方法可以在全局变量上定义将要使用的所有字符串，就像在Android开发中一样，这里有一个String.xml，您可以在其中放置所有字符串。回答：我要做的是创建一个globals模块…//文件：Globals.jsmodule.exports = { STORE_KEY: 'a56z0fzrNpl^2', BASE_URL: 'http://someurl.com', COLOR: { ORANGE: '#C50', DA...
2024-01-10
React Native获取组件位置和大小
RN页面中定位或滚动操作时，需要获取元素的大小和位置信息，有几种常用的方法获取设备屏幕的宽高import {Dimensions} from 'react-native';var {height, width} = Dimensions.get('window');获取元素的大小和位置信息1. onLayout事件属性<View onLayout={this._onLayout}><View>_onLayout = (e) => { let {x,y,width,height} = e.nativeE...
2024-01-10
使用 React Native 一年后的感受
当我在面试Discord的时候，技术主管Stanislav跟我说：React Native代表着未来。等它一发布，我们就会用它从零构建iOS应用。作为一名原生iOS开发者，基于先前使用PhoneGap的经验，我非常怀疑使用Web技术构建移动应用的这种方式。但是当我学习并使用React Native一段时间之后，我非常庆幸我们做了这个决定。...
2024-01-10
React-Native集成dva.js
dvajs作为一个基于redux的状态管理框架，在react中的表现还是很不错的，如果我们想要在react-native应用中使用dvajs该怎么做呢？首先安装dva-core和react-redux：npm i -S dva-core react-reduxdva-core是dvajs的核心部分，能够很好的和其他react-native组件在一起工作。dva-core和dva在提供的方法上有一些区别，不过在使用思...
2024-01-10React Native验证码倒计时工具类分享
本文实例为大家分享了React Native验证码倒计时工具类的具体代码，供大家参考，具体内容如下因为以前直接用定时器，没去计算当前的时候，每次退出程序的时候，定时器一直不走，这个工具类简单的解决程序退出后台，定时器不走的bug，那么，直接上代码咯~~/** * Created by zhuang.haipeng on 2017.9.11 * * ...
2024-01-10
React Native 项目iOS真机调试红屏
错误信息：反应本地版本不匹配。javascript版本xx.xx.xx本地版本xx.xx.xx原因：开启的反应原生服务与你当前运行的反应原生项目不一致造成的。解决办法：打开终端，将路径切到RN项目下，并执行npm start待服务开启后，在iphone设备端，摇晃会reload js即可。侵权请联系我删除。...
2024-01-10React-Native 桥接iOS原生开发详解
react-native的文档的原生模块中可以看到清洗的代码 传送门接下来先说一下笔者的要实现的功能:在iOS原生代码中集成高德导航,在RN中用JS去调用原声代码,并进行跳转,接下来是笔者遇到的问题与不好理解的地方,写出来跟大家分享让大家少走弯路.刚开始也是一头雾水且查资料也是到处都是但是都没...
2024-01-10无法运行jetifier React Native
我尝试运行react-native run-android，但出现此错误。info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. error Failed to run jetifier. Run CLI with --verbose flag for more details. Error: spawnSync C:\Users\JayK...
2024-01-10
在Mac系统下搭建React Native开发环境
这里记录一下在Mac系统下搭建React Native开发环境的过程： 1. 安装HomeBrew:1/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 安装完后如下所示： \ 可使用命令：”brew -v“查看其版本。 2. 安装Node.JS: brew install node，也可以在node.js官网下载pkg安装包进...
2024-01-10
React Native安卓项目打包发布APK步骤
1、产生签名的key该过程会用到keytool，开发过安卓的都应该接触过该东西。详细请见密钥和证书管理工具。在项目的主目录（不是android文件夹）中执行：--生成签名key，注意记下你的密钥和存储密码，后面配置文件需要使用keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -val...
2024-01-10
React 之 setState
前言： state是React中非常重要的概念。React通过管理状态来实现对组件的管理，React通过this.state来访问state,又通过this.setState()来更新state,当this.setState()方法被调用时，React会重新调用render函数来重新渲染UI。一、setState异步更新 setState通过一个队列机制实现state更新。当执行setState时，会将需要更...
2024-01-10
使用TypeScript创建React Native
⒈初始化 React Native环境 参考https://reactnative.cn/docs/getting-started.html⒉安装React Native官方的脚手架工具npm install -g @react-native-community/cli⒊使用React Native脚手架初始化项目#默认是JavaScriptnpx react-native init ts_react_native#可以直接使用TypeScript初始化npx react-native init ts_r...
2024-01-10
React Native 仿 ofo 共享单车 App
本文为 Marno 原创，转载必须保留出处！公众号【 aMarno 】，关注后回复 RN 加入交流群React Native 优秀开源项目大全：http://www.marno.cnhttp://www.jianshu.com/p/6d7bac35af46一、前言并没有实现 ofo 所有功能，只完成了主要的界面和逻辑，感觉其中也就【地图】和【扫码】两个比较核心的功能还需要花点时...
2024-01-10
从零开始学习React Native，先重布局开始学起
React Native布局学习，模仿携程的首页内容，可以很好的让我们练习一下flexbox布局，最后完成的效果图如下：附上Github地址，欢迎star一、布局主要内容如下：1、搜索栏的布局2、图片轮播3、类似九宫格的布局4、图片、文字混合布局5、底部布局主要使用的控件StyleSheet Text PixelRatio ScrollView Image View TextI...
2024-01-10
React Native Css简介及其与前端Css不同
Css简介作为一名前端工作者对css都是非常熟悉的，前端三要素为结构html表现css及行为js。结构负责整个页面的骨架，展现其主要内容，表现相当于外貌，使其更为丰满可观，而行为则负责人机交互以及一些复杂的动态效果。css遵循其语言规范进行工作，其语法结构也是非常的简单。本文不在此赘述css...
2024-01-10
React Native环境配置之Windows版本搭建
接近年底了，回想这一年都做了啥，学习了啥，然后突然发现，这一年买了不少书，看是看了，就没有完整看完的。悲催。然后，最近项目也不是很紧了，所以抽空学习了H5。自学啃书还是很无趣的，虽然Head First Html5 Programming（中文版）这本书讲的很有意思，但是学习了大半本就想自己动手练练，所以...
2024-01-10
React Native开发之——组件TextInput
前言React Native中用于输入文本的组件是TextInput，类似于Android中的EditText，TextInput也是继承自 View,所以 View 的属性 TextInput 也能使用，一些样式类的属性可以参照 View 的相关属性。本文主要讲述：autoCapitalize属性autoCorrect属性autoFocus属性keyboardType属性（设置软键盘类型）returnKeyType属性（设置返回键类...
2024-01-10
2019年React Native入门：构建第一个应用程序
了解如何使用重要的基本概念构建您的第一个React Native应用程序以及从这里出发的去处！ 信用： https ： //unsplash.com/@nateggrant 我们生活在各种各样的移动设备中，这些设备主要由iOS和Android两个平台主导。 这是一场两匹马的比赛，我相信我们都可以对此表示同意。 但是，构建移动应用程序并非易事...
2024-01-10
React提高02 React性能优化
已同步到个人博客，欢迎访问。PureRenderMixin因为react的diff是在某一个根节点发生变化的时候，调用所有节点进行render，再对生成的虚拟DOM进行对比，如果不变则不对真实DOM进行更新。这就导致了性能的浪费。所以优化针对两方面：拆分组件，有利于组件复用和优化避免不必要的render避免不要的...
2024-01-10
React-Native痛点解析之开发环境搭建及扩展
\React Native简直太火了，国内大公司都在争先恐后的尝鲜，让人难以相信这是诞生刚刚一年的开源项目。正因为它的年轻，在使用它进行开发时难免会遇到这样那样的坑，因此，我们邀请了《React Native入门与实战》的作...
2024-01-10
